<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统入口端</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}">
    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="{% static '/css/font-awesome.min.css' %}">
    <!-- ElegantFonts CSS -->
    <link rel="stylesheet" href="{% static '/css/elegant-fonts.css' %}">
    <!-- themify-icons CSS -->
    <link rel="stylesheet" href="{% static '/css/themify-icons.css' %}">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="{% static '/css/swiper.min.css' %}">
    <!-- Styles -->
    <link rel="stylesheet" href="{% static '/style.css' %}">
    <style type="text/css">
        .change-a-width li a{
            width: 95px;
        }
        .hero-content-overlay-height {
    height: 90px;
}
        .entry-header-top{
            margin-top: -230px;
        }
        a{

                text-decoration:none !important;
            }
            .entry-header-top {
                margin-top: 0px;
        }
        .listborder{
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="hero-content">
        <header class="site-header">


        <div class="nav-bar">
            <div class="container">
                <div class="row">
                    <div class="col-9 col-lg-3">
                        <div class="site-branding">
                            <h1 class="site-title"><a href="{% url 'empoll:login' %}" rel="home">评分管理<small><span>系统</span></small></a></h1>
                        </div><!-- .site-branding -->
                    </div><!-- .col -->

                    <div class="col-3 col-lg-9 flex justify-content-end align-content-center">
                        <nav class="site-navigation flex justify-content-end align-items-center">
                            <ul class="flex flex-column flex-lg-row justify-content-lg-end align-content-center change-a-width">
                                <li class="current-menu-item"><a href="{% url 'empoll:login' %}">首页</a></li>
                                <!--<li><a href="#">新建</a></li>-->
                                <!--<li><a href="#">查询</a></li>-->


                            </ul>

                            <div class="hamburger-menu d-lg-none">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div><!-- .hamburger-menu -->

                            <div class="header-bar-cart">
                                <a href="#" class="flex justify-content-center align-items-center"><span aria-hidden="true" class="icon_bag_alt"></span></a>
                            </div><!-- .header-bar-search -->
                        </nav><!-- .site-navigation -->
                    </div><!-- .col -->
                </div><!-- .row -->
            </div><!-- .container -->
        </div><!-- .nav-bar -->
    </header><!-- .site-header -->

    <div class="hero-content-overlay hero-content-overlay-height">
        <div class="container">
            <div class="row">

            </div><!-- .row -->
        </div><!-- .container -->
    </div><!-- .hero-content-hero-content-overlay -->
</div><!-- .hero-content -->

<section class="featured-courses horizontal-column courses-wrap">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <header class="heading flex justify-content-between align-items-center">
                    <h2 class="entry-title">导出列表</h2>

                </header><!-- .heading -->
            </div><!-- .col -->

            <div class="col-12 col-lg-12">
                <div class="course-content flex flex-wrap justify-content-between align-content-lg-stretch row" style="    padding: 26px 30px 20px;">
                            <div class="row col-4">
                                {% if id %}
                                <div class="flex flex-column">
                                <header class="entry-header entry-header-top">
                                    <h2 style="color:#19c880">添加部门标签</h2>
                                </header><!-- .entry-header -->
                                    <div class="header-bar-search">
                                        <form class="flex align-items-stretch" method="post" action="{% url 'empoll:get_output_self_list' id %}">
                                            {% csrf_token %}
                                            <input type="search" placeholder="输入Key" name="key">
                                            <br>

                                            <button type="submit" value="" class="flex justify-content-center align-items-center">添加</button>
                                        </form>
                                    </div><!--.header-bar-search-->

                            </div><!-- .hero-content-wrap -->
                            {% else %}
                            <h4>参数错误</h4>
                            {% endif %}

                            </div>





            </div><!-- .col -->
            </div><!-- .row -->
            <div class="col-12 col-lg-12 ">
                <div class="controls">
                <label>过滤</label>
                <button class="filter" data-filter="all">全部</button>
                <button class="filter" data-filter=".category-1">部门负责人</button>
                <button class="filter" data-filter=".category-2">部门中层</button>
                <button class="filter" data-filter=".category-3">部门普通员工</button>
                </div>
                <div class="popular-tags">
                    <div id="Container" class="container">
                    <ul class="flex flex-wrap align-items-center p-0 m-0">
                    {% if depart_name_list %}
                    {% for obj in depart_name_list %}
                        <li><div class="mix category-1"><a href="#">{{obj}}部门负责人</a></div></li>
                        <li><div class="mix category-2"><a href="#">{{obj}}中层</a></div></li>
                        <li><div class="mix category-3"><a href="#">{{obj}}普通员工</a></div></li>
                    {% endfor %}
                    {% endif %}
                    </ul>
                        </div>
                    </div><!-- .popular-tags -->
            </div>

        </div><!-- .container -->
        <div class="row">

        </div>
    </div>
</section><!-- .courses-wrap -->

<footer class="site-footer">
        <div class="footer-bar">
            <div class="container">
                <div class="row flex-wrap justify-content-center justify-content-lg-between align-items-center">
                    <div class="col-12 col-lg-4">
                        <div class="download-apps flex flex-wrap justify-content-center justify-content-lg-start align-items-center">
                            <a href="http://www.henannu.edu.cn/"><img src="{% static '/images/shid.jpg' %}" alt="" style="height: 37px;width: 119px;"></a>
                            <a href="https://github.com/aoxipo"><img src="{% static '/images/my1.png'  %}" alt="" style="height: 37px;width: 119px;"></a>
                        </div><!-- .download-apps -->

                    </div>
                    <div class="col-12 col-lg-4" style="text-align: center;padding-top: 10px;"><a href="http://www.miitbeian.gov.cn/" style="color: #757686;">豫ICP备18043565号</a></div>
                    <div class="col-12 col-lg-4 mt-4 mt-lg-0">
                        <div class="footer-bar-nav">
                            <ul class="flex flex-wrap justify-content-center justify-content-lg-end align-items-center">
                                <li><a href="#">list</a></li>
                                <li><a href="#">Terms of Use</a></li>
                                <li><a href="https://github.com/aoxipo">Privacy Policy</a></li>
                            </ul>
                        </div><!-- .footer-bar-nav -->
                    </div><!-- .col-12 -->
                </div><!-- .row -->
            </div><!-- .container -->
        </div><!-- .footer-bar -->
    </footer><!-- .site-footer -->

    <script type='text/javascript' src="{% static '/js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/js/swiper.min.js'%}" ></script>
    <script type='text/javascript' src="{% static '/js/masonry.pkgd.min.js' %}"></script>
    <script type='text/javascript' src="{% static '/js/jquery.collapsible.min.js' %}"></script>
    <script type='text/javascript' src="{% static '/js/custom.js' %}"></script>
     <script type="text/javascript">
        var filter = document.getElementsByClassName("filter");
        var c1=document.getElementsByClassName("category-1");
         var c2=document.getElementsByClassName("category-2");
         var c3=document.getElementsByClassName("category-3");
        filter[0].onclick=function(){
             for (var i = 0; i < c1.length; i) {
                c1[i].style.display="None";
            };
            for (var i = 0; i < c2.length; i) {
                c2[i].style.display="None";
            };
            for (var i = 0; i < c3.length; i) {
                c3[i].style.display="None";
            };
            for(let index in c2) {
                c2[index].style.display="None";
            };
            for(let index in c3) {
                c3[index].style.display="None";
            };
        }
        filter[1].onclick=function(){
            alert(1);
        }
        filter[2].onclick=function(){
            alert(2);
        }
        filter[3].onclick=function(){
            alert(3);
        }
    </script>

</body>
</html>